<template>
  <div class="login">
    <div class="logo">
      <div class="logo-box">
        <img
          src="../../assets/images/hwlogo.png"
          height="165"
          width="149"
          alt="">
      </div>
      <p>重庆呼我出行运营BI系统</p>
    </div>
    <form
      action=""
      class="login-form form-style">
      <div class="form-group clearfix">
        <span class="fl">用户名 :</span>
        <input
          v-model="validate.user"
          type="text"
          class="fl user"
          name="userName"
          autocomplete="off"
          placeholder="请输入用户名"
          @keyup="user">
      </div>
      <div
        v-show="validateUser"
        class="error">用户名不能为空</div>
      <div class="form-group clearfix">
        <span class="fl">密 &nbsp;&nbsp;码 :</span>
        <input
          v-model="validate.pwd"
          type="password"
          class="fl pwd"
          name="passWord"
          autocomplete="off"
          placeholder="请输入密码"
          @keyup="pwd">
      </div>
      <div
        v-show="validatePwd"
        class="error">请输入6-16位密码</div>
      <div
        v-show="loginAlert"
        class="error">{{ backMessage }}</div>
      <a
        href="javascript:"
        class="login-btn form-btn"
        @click="loginSbmit">确定</a>
    </form>
    <mask-loading
      v-show="isShowMask"
      :msg="msg"
      :num="num"
      :width="width"
      @closeMask="closeMask"/>
  </div>
</template>
<script>
import maskLoading from '@/components/mask/mask'
import qs from 'qs'

export default {
  components: {
    maskLoading
  },
  data () {
    return {
      validate: {
        user: '',
        pwd: ''
      },
      validateUser: false,
      validatePwd: false,
      loginAlert: false,
      backMessage: '',
      msg: '用户名不存在，请退出并联系管理员',
      isShowMask: false,
      num: 2,
      width: '90%'
    }
  },
  mounted () {
    dd.ready(function () {
      dd.runtime.permission.requestAuthCode({
        corpId: 'dingeb448eca088e91ec35c2f4657eb6378f',
        onSuccess: function (result) {
          this.$api
            .post('/user/ddLogin', qs.stringify({
              code: result.code
            }))
            .then(function (res) {
              let result = res.data
              if (result.error === 0) {
                sessionStorage.setItem('token', result.token)
                sessionStorage.setItem('userName', result.userName)
                sessionStorage.setItem('getLoginInfo', JSON.stringify(res.data))
                let areaName = result.areaName
                let code = result.areaCode
                let userType = result.userType
                let areaType = result.level
                var role = {
                  code,
                  areaName,
                  userType,
                  areaType
                }
                let roleData = JSON.stringify(role)
                sessionStorage.setItem('getRole', roleData)
                this.$router.push('/Home/tab')
              } else {
                this.loginAlert = true
                this.isShowMask = true
                // this.backMessage = result.message
              }
            })
            .catch(function (err) {
              alert(err)
            })
        },
        onFail: function (err) {
          console.log(err)
        }
      })
    })
  },
  methods: {
    user () {
      this.loginAlert = false
      if (this.validate.user === '') {
        this.validateUser = true
        return false
      } else {
        this.validateUser = false
        return true
      }
    },
    pwd () {
      this.loginAlert = false
      let regex = /^\w{6,16}$/
      if (regex.test(this.validate.pwd)) {
        this.validatePwd = false
        return true
      } else {
        this.validatePwd = true
        return false
      }
    },
    loginSbmit () {
      let isSubmit = this.user() && this.pwd()
      if (isSubmit) {
        this.msg = '登录中...'
        this.isShowMask = true
        setTimeout(() => {
          this.$api
            .post('/user/login', qs.stringify({
              userName: this.validate.user,
              passWord: this.validate.pwd
            }))
            .then((res) => {
              let result = res.data
              if (result.error === 0) {
                sessionStorage.setItem('token', result.token)
                sessionStorage.setItem('userName', result.userName)
                sessionStorage.setItem('getLoginInfo', JSON.stringify(res.data))
                let areaName = result.areaName
                let code = result.areaCode
                let userType = result.userType
                let areaType = result.level
                var role = {
                  code,
                  areaName,
                  userType,
                  areaType
                }
                let roleData = JSON.stringify(role)
                sessionStorage.setItem('getRole', roleData)
                this.$router.push('/Home/tab')
              } else {
                this.loginAlert = true
                this.isShowMask = true
                this.backMessage = result.message
              }
            })
        }, 1000)
      }
    },
    // 关闭遮罩
    closeMask () {
      this.isShowMask = false
    }
  }
}

</script>
<style lang='scss' src='../../pages/Login/login.scss'></style>
